<template>
  <div class="tranfer-box">
    <div class="left-info">
      <div class="tab">
        <Checkbox v-model="isAll" :disabled="disabled" @on-change="onChangeAllSelect">全选</Checkbox>
        <p>当前经销商</p>
      </div>
      <div class="search fleft">
        <Input clearable v-model.trim="searchWord" placeholder="请输入关键词搜索" />
        <Button type="primary" @click="searchByKeyword">搜索</Button>
      </div>
      <div class="content">
        <ul v-if="delayDistribList.length">
          <template v-for="(item, index) in delayDistribList">
            <li :key="index" class="checkbox">
              <label :for="'delaycheckbox'+index" :de="item.status">
                <input
                  :id="'delaycheckbox'+index"
                  v-model="item.status"
                  class="delayText"
                  :disabled="disabled"
                  type="checkbox"
                  :value="item.value"
                  @change="onJoinSelectData(index, item, $event)"
                >
                <span />
                {{ item.value }}
              </label>
            </li>
          </template>
        </ul>
        <p class="empty-distribute" v-else>暂无数据。。。</p>
      </div>
    </div>
    <div class="right-info">
      <div class="tab">
        <p>已选经销商</p>
        <div class="cancel-info" @click="onCancel">全部取消</div>
      </div>
      <div class="search fleft">
        <Input clearable v-model.trim="searchWordRight" placeholder="请输入关键词搜索" />
        <Button type="primary" @click="searchByKeywordRight">搜索</Button>
      </div>
      <div class="content">
        <ul v-if="delayDistribedList.length">
          <li v-for="(item, index) in delayDistribedList" :key="index" class="checkbox">
            <label :for="'delaycheckboxed' + index">
              <input
                :id="'delaycheckboxed'+index"
                v-model="item.status"
                class="delayText1"
                :disabled="disabled"
                :text="item.status"
                type="checkbox"
                :value="item.value"
                @change="deleteSelectData(index, item, $event)"
              >
              <span />
              {{ item.value }}
            </label>
          </li>
        </ul>
        <p class="empty-distribute" v-else>暂无数据。。。</p>
      </div>
    </div>
    <div :class="{'load-disable': disabled}" />
  </div>
</template>
<script>
export default {
  props: {
    disabled: Boolean
  },
  data () {
    return {
      isAll: false,
      searchWord: '',
      searchWordComputed: '', // 用于点击搜索触发计算
      searchWordRight: '',
      searchWordComputedRight: '',
      selectList: []
    }
  },
  computed: {
    delayDistribList() {
      if (!this.searchWordComputed) {
        return this.$store.state.bargain.form.delayDistribList
      } else {
        let list = this.$store.state.bargain.form.delayDistribList
        return list.filter(item => item.value.indexOf(this.searchWordComputed) > -1)
      }
    },
    delayDistribedList() {
      if (!this.searchWordComputedRight) {
        return this.$store.state.bargain.form.delayDistribedList
      } else {
        let list = this.$store.state.bargain.form.delayDistribedList
        return list.filter(item => item.value.indexOf(this.searchWordComputedRight) > -1)
      }
    }
  },
  mounted () {
    // this.$store.dispatch('getDistributData', '1')
  },
  methods: {
    searchByKeyword() {
      this.searchWordComputed = this.searchWord
    },
    searchByKeywordRight() {
      this.searchWordComputedRight = this.searchWordRight
    },
    deleteSelectData (index, item, e) {
      e.target.checked = true
      this.$store.commit('bargainDeleteDistib', { index: index, item: item, type: 'delay' })
    },  
    onJoinSelectData (index, item, e) {
      e.target.checked = false
      this.$store.commit('bargainDistib', { index: index, item: item, type: 'delay' })

    },
    onChangeAllSelect () {
      document.querySelectorAll('.delayText1').forEach(item => {
        item.checked = true
      })
      this.$store.commit('onChangeAllSelect', 'delay')
    },
    onCancel () {
      if (this.disabled) return
      this.isAll = false
      this.$store.commit('onCancel', 'delay')
    }
  }
}
</script>

